<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>华为官网 - 热门产品</title>
  <!-- 引入基础依赖 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind自定义配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            huawei: { blue: '#165DFF', dark: '#0F172A', light: '#F1F5F9', gray: '#64748B' }
          },
          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] }
        }
      }
    }
  </script>
</head>

<body class="font-sans bg-white text-huawei-dark">
  <!-- 简单导航（确保页面完整性） -->
  <header class="bg-white shadow-sm">
    <div class="container mx-auto px-4 h-16 flex items-center justify-between">
      <a href="#" class="flex items-center space-x-2">
        <div class="w-10 h-10 bg-huawei-blue rounded flex items-center justify-center">
          <span class="text-white font-bold text-xl">H</span>
        </div>
        <span class="text-xl font-bold text-huawei-blue">华为</span>
      </a>
      <a href="#" class="text-huawei-blue hover:underline">返回首页</a>
    </div>
  </header>

  <!-- 产品展示区 -->
  <main class="py-16 bg-huawei-light/50">
    <div class="container mx-auto px-4">
      <div class="text-center mb-12">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">热门产品</h2>
        <p class="text-huawei-gray max-w-2xl mx-auto">探索华为全系列产品，体验科技带来的美好生活</p>
      </div>
      
      <!-- 产品卡片网格 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- 智能手机卡片 -->
        <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
          <div class="h-48 overflow-hidden">
            <img src="https://picsum.photos/id/96/800/600" alt="智能手机" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
          </div>
          <div class="p-4">
            <h3 class="font-semibold text-lg mb-2">智能手机</h3>
            <p class="text-huawei-gray text-sm mb-4">Mate系列 | P系列 | Nova系列</p>
            <a href="#" class="text-huawei-blue text-sm flex items-center hover:underline">
              查看全部 <i class="fa fa-arrow-right ml-1 text-xs"></i>
            </a>
          </div>
        </div>
        
        <!-- 笔记本卡片 -->
        <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
          <div class="h-48 overflow-hidden">
            <img src="https://picsum.photos/id/48/800/600" alt="笔记本电脑" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
          </div>
          <div class="p-4">
            <h3 class="font-semibold text-lg mb-2">笔记本电脑</h3>
            <p class="text-huawei-gray text-sm mb-4">MateBook X Pro | 荣耀MagicBook</p>
            <a href="#" class="text-huawei-blue text-sm flex items-center hover:underline">
              查看全部 <i class="fa fa-arrow-right ml-1 text-xs"></i>
            </a>
          </div>
        </div>
        
        <!-- 平板卡片 -->
        <div class="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
          <div class="h-48 overflow-hidden">
            <img src="https://picsum.photos/id/119/800/600" alt="平板电脑" class